<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #showCode {
            background-color: #ddd;
            font-style: italic;
            letter-spacing: 3px;
        }
    </style>
</head>

<body>

    <!-- 表单验证 -->
    <p>用户名：只能由数字和字母组成且数字不能开头，长度4-10位</p>
    <input type="text" placeholder="请输入用户名" id="username">
    <span id="user_span"></span>
    <br>
    <p>密码：只能由数字和字母组成，长度4-10位</p>
    <input type="password" placeholder="请输入用户名">
    <br>
    <p>确认密码</p>
    <input type="text" placeholder="请输入用户名">
    <br>
    <p>验证码</p>
    <input type="text" placeholder="验证码">
    <span id="showCode">1234</span>
    <button>刷新</button>

    <p>
        <button id="btn">注册</button>
    </p>


    <script>


        var smallArr = [];
        for (var i = 97; i <= 122; i++) {
            var s = String.fromCharCode(i);
            smallArr.push(s);
        }
        console.log(smallArr);

        var bigArr = [];
        for (var i = 65; i <= 90; i++) {
            var s = String.fromCharCode(i);
            bigArr.push(s);
        }
        console.log(bigArr);

        var numArr = [];
        for (var i = 0; i <= 9; i++) {
            numArr.push(i + '');
        }

        var allArr = smallArr.concat(bigArr, numArr);
        console.log(allArr);






        // 获取相关的元素
        var oBtn = get('btn');
        var oUser = get('username');
        var oUserSpan = get('user_span');
        var oShowCode = get('showCode');

        // 页面一打开的时候就要显示验证码
        oShowCode.innerHTML = randCode();




        // 绑定事件
        oBtn.onclick = function () {
            // 验证用户名
            // 获取用户名
            var user = oUser.value;
            // console.log(user);  // 测试
            // 验证开始
            //   1 验证是否输入
            if (user === '') {
                oUserSpan.innerHTML = '用户名不能为空';
                // span的样式  颜色 
                // js生成的样式是行内  -- 权重
                // 属性使用驼峰命名法   fontSize
                oUserSpan.style.color = 'red';
                return;
            }
            //  2 验证长度
            if (user.length < 4 || user.length > 10) {
                oUserSpan.innerHTML = '长度只能是4-10位';
                oUserSpan.style.color = 'red';
                return;
            }
            //  3 数字不能开头  --- 第一位不能是数字
            // if(!isNaN(user[0])) {}
            // is(numArr.includes(user[0])) {}
            if (user[0] >= 0 && user[0] <= 9) {
                oUserSpan.innerHTML = '数字不能开头';
                oUserSpan.style.color = 'red';
                return;
            }

            //  4 只能由数字，字母组成  每一个字符都需要判断
            //    思路：把所有合法的字符存入一个数组中   去判断数组中是否有这个值
            for (var i = 0; i < user.length; i++) {
                // 判断allArr中是否包含这个值
                if (!allArr.includes(user[i])) {    // 不包含就非法
                    oUserSpan.innerHTML = '只能由字母数字组成';
                    oUserSpan.style.color = 'red';
                    return;
                }
            }

            // 验证通过   
            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green';

            // 继续判断密码  
            // 。。。。

            // 强弱验证
            //    如果只包含一种   弱
            //    包含其中两种    中
            //    包含三种       强


        }


        randCode()

        // 增强版
        function randCode(n) {
            n = n || 5;   // 默认五位

            var res = '';
            for (var i = 0; i < n; i++) {
                var j = rand(0, allArr.length);
                res += allArr[j];
            }

            console.log(res);

            // 假设法
            var flag1 = false, flag2 = false, falg3 = false;
            // 遍历验证码    53dQd
            for (var i in res) {
                // 判断是否有数字
                if (numArr.includes(res[i])) {
                    flag1 = true;
                    // 优化  结束本次循环
                    continue;
                }
                // 判断有小写
                if (smallArr.includes(res[i])) {
                    flag2 = true;
                    continue;
                }
                if (bigArr.includes(res[i])) {
                    flag3 = true;
                }
            }

            if (flag1 && flag2 && flag3) {
                console.log('ok');
                return res;
            } else {
                console.log('err');
                return randCode(n);
            }


        }



        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }


        function get(id) {
            return document.getElementById(id);
        }

    </script>

</body>

</html>